<template>
    <div>
        <el-row>
            <el-col :span="6" class="xuan">
                <span>状态：</span>
                <el-radio-group v-model="radio">
                    <el-radio-button label="全部" value="全部" @click="status(1)" />
                    <el-radio-button label="上架" value="上架" @click="status(2)" />
                    <el-radio-button label="下架" value="下架" @click="status(3)" />
                </el-radio-group>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="2" class="xinzeng">
                <el-button type="primary" @click="xin">
                    新增轮播图
                </el-button>
            </el-col>
        </el-row>
        <el-row>
            <el-col class="biao">
                <el-table :data="list" border style="width: 100%">
                    <el-table-column prop="lid" label="ID" label-class-name="header" align="center" />
                    <el-table-column label="图片" label-class-name="header" align="center">
                        <template #default="scope">
                            <el-image style="width: 200px; height: 100px" :src="scope.row.lphoto" />
                        </template>
                    </el-table-column>
                    <el-table-column label="状态" label-class-name="header" align="center">
                        <template #default="scope">
                            <div class="up" v-if="scope.row.ldel==1">上架</div>
                            <div class="down" v-if="scope.row.ldel==0">下架</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" label-class-name="header" align="center">
                        <template #default="scope">
                            <el-button v-if="scope.row.ldel==1" class="caozuo" type="text" @click="down(scope)">下架</el-button>
                            <el-button v-else type="text" class="caozuo" @click="up(scope)">上架</el-button>
                            <el-button type="text" class="caozuo" @click="del(scope)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
            <el-dialog v-model="show" :title="title" :class="{small:title=='提示'}">
                <XinZeng v-if="title=='新增轮播图'" @tuichu="add"></XinZeng>
                <ShanChu :code="code" v-if="title=='提示'" @tuichu="delt"></ShanChu>
            </el-dialog>
        </el-row>
        <el-row>
            <el-col :span="20">
                <el-pagination layout="prev, pager, next" :total="num" :current-page="pages" style="position: relative; top: -20px; left: 10px;" @current-change="chan" />
            </el-col>
        </el-row>
    </div>
</template>

<script setup>
    import { ref, onMounted, h } from "vue";
    import axios from "axios";
    import qs from "qs";
    import ShanChu from "./components/ShanChu.vue";
    import XinZeng from "./components/XinZeng.vue";
    import { ElMessage } from "element-plus";

    let num = ref(1);
    let pages = ref(1);
    let radio = ref("全部");
    let title = ref();
    let show = ref(false);
    let code = ref();
    let rad = ref("");

    const sou = async function () {
        let res = await axios.get(`/lunbo/show?del=${rad.value}`);
        list.value = res.data.data;
    };

    const up = async function (data) {
        await axios.post(
            "/lunbo/update",
            qs.stringify({
                lId: data.row.lid,
                lPhoto: data.row.lphoto,
                lDel: 1
            })
        );
        sou();
    };

    const down = async function (data) {
        await axios.post(
            "/lunbo/update",
            qs.stringify({
                lId: data.row.lid,
                lPhoto: data.row.lphoto,
                lDel: 0
            })
        );
        sou();
    };

    const xin = function () {
        title.value = "新增轮播图";
        show.value = true;
    };

    const status = function (data) {
        if (data == 1) {
            rad.value = "";
        } else {
            rad.value = data;
        }
        sou();
    };

    const del = async function (data) {
        title.value = "提示";
        show.value = true;
        code.value = data.row.lid;
    };

    const add = async function (data) {
        show.value = false;
        if (data) {
            await axios.post(
                "/lunbo/add",
                qs.stringify({
                    ...data
                })
            );
        }
        sou();
    };

    const delt = async function (data) {
        show.value = false;
        if (data) {
            await axios.post("/lunbo/delete", qs.stringify({ ...data }));
            ElMessage({
                message: h(
                    "div",
                    { style: "width:300px;font-size:15px;color:rgb(99, 185, 129)" },
                    "删除成功!"
                ),
                type: "success"
            });
        } else {
            ElMessage({
                message: h(
                    "div",
                    { style: "width:300px;color:#999;font-size:15px" },
                    "已取消删除"
                )
            });
        }
        sou();
    };

    let list = ref([]);
    onMounted(async function () {
        sou();
    });
</script>

<style lang="less" scoped>
    .sou {
        padding: 0 20px;
        display: flex;
        justify-content: start;
        align-items: center;
    }
    .na {
        margin-right: 10px;
    }

    .xinzeng {
        padding: 20px;
    }

    /deep/ .header {
        background-color: #4f91ff !important;
        color: white !important;
    }

    .biao {
        padding: 0 20px 20px 20px;

        .caozuo {
            font-size: 12px;
        }
    }

    /deep/ .small {
        width: 30% !important;
    }

    .gl:hover {
        text-decoration: underline;
    }

    .up {
        padding: 5px;
        background-color: #eafaf0;
        color: #13ce66;
        font-size: 12px;
        width: 50px;
        border: 1px solid #d7f5df;
        border-radius: 5px;
        margin: 0 auto;
    }

    .down {
        padding: 5px;
        background-color: #fceded;
        color: #ff4949;
        font-size: 12px;
        width: 50px;
        border: 1px solid #f9dbdb;
        border-radius: 5px;
        margin: 0 auto;
    }
</style>